@use '@/assets/scss/reset.scss' as *;
@use '@/assets/scss/variables.scss' as *;

:root {
	font-family: '思源黑体 ExtraLight-subset' !important;
	color: black;
	background-color: white;
}

#app {
	width: 100%;
	min-height: 100vh;
	font-family: '思源黑体 ExtraLight-subset' !important;
	overflow-x: hidden;
	font-weight: normal;

	// 当用户试图选择页面上的文本时，这个属性可以防止文本被选中。
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* 这个属性是用于WebKit浏览器（例如Safari和Chrome）的。它控制文本的平滑显示方式。
      antialiased值表示文本将使用抗锯齿技术来平滑显示，从而使文本看起来更加清晰和光滑。 */
	-webkit-font-smoothing: antialiased;
	/* 这个属性是用于Mozilla浏览器（例如Firefox）在OS X系统上的。它也控制文本的平滑显示方式。
      grayscale值表示文本将使用灰度平滑技术来显示，这通常会使文本看起来更加清晰，特别是在高分辨率屏幕上。 */
	-moz-osx-font-smoothing: grayscale;
}

.flex-shrink-0 {
	flex-shrink: 0;
}
.flex-grow-0 {
	flex-grow: 0;
}
.flex-grow-1 {
	flex-grow: 1;
}
.flex-column {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.object-fit-cover {
	object-fit: cover;
}
.border-box {
	box-sizing: border-box;
}
.fw-bold {
	font-weight: bold;
}
.w-0 {
	width: 0;
}
.w-100 {
	width: 100%;
}
.w-50 {
	width: 50%;
}
.h-100 {
	height: 100%;
}
.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.text-again-center {
	text-align: center;
}
.flex-column {
	flex-direction: column;
}

@mixin placeholderColor($color) {
	&::input-placeholder {
		/*WebKit browsers*/
		color: $color;
	}
	&::-webkit-input-placeholder {
		/*WebKit browsers*/
		color: $color;
	}
	&::-moz-input-placeholder {
		/*Mozilla Firefox*/
		color: $color;
	}
	&::-ms-input-placeholder {
		/*Internet Explorer*/
		color: $color;
	}
}

/* 适配iphonex */

@supports (bottom: env(safe-area-inset-bottom)) {
	.layout-container {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px); // 这里是重点
	}
}
